import {processImg, config} from 'utils'

const Layout = (props) => {
  return (
    <div style={{paddingTop:30, paddingBottom:30}}>
      <img src="http://p04tubuji.bkt.clouddn.com/top.gif" alt="" width='100%'/>
      {props.children}
      <img src="http://p04tubuji.bkt.clouddn.com/share.jpeg" alt="" width='100%'/>
    </div>
  )
}

const Daren = props => {
  let {styleType, userName, userImg, content} = props
  if(styleType === 1) {
    return <div>
      <InfoTitle styleType={styleType}>达人推荐</InfoTitle>
      <img src={userImg} alt="" width='160'/>
      <ItemP key='username'>{userName}</ItemP>
      <ItemP key='content'>{content}</ItemP>
    </div>
  } else {
    return <div>
      <InfoTitle styleType={styleType}>达人推荐</InfoTitle>
      <img src={userImg} alt="" width='160'/>
      <ItemP key='username'>{userName}</ItemP>
      <ItemP key='content'>{content}</ItemP>
    </div>
  }
}

const ItemP = props => <p style={{lineHeight: 1.5, paddingTop: 7, paddingBottom:7}}>{props.children}</p>
const ItemPCenter = props => <p style={{lineHeight: 1.5, paddingTop: 7, paddingBottom:7, textAlign:'center'}}>{props.children}</p>


const InfoTitle = (props) => {
  let {styleType, children} = props
  if (styleType === 1) {
    return <center style={{textAlign: 'center', marginTop: 15, marginBottom: 10}}>
      <strong style={{backgroundColor: 'rgb(108, 109, 112)', color: 'rgb(255, 255, 255)', fontSize: 15, paddingLeft: 5, paddingRight:5}}>
        {children}
      </strong>
    </center>
  } else {
    return <p style={{fontSize: 15, marginTop: 15, marginBottom: 10}}>[{children}]</p>
  }
}

const  InfoItem = (props) => {
  let {styleType, children} = props
  if (styleType === 1) {
    return <center style={{textAlign: 'center', marginTop: 5}}> {children}
    </center>
  } else {
    return <p style={{marginTop: 5}}>{children}</p>
  }
}


const RestaurantInfo = props => {
  const {styleType, data} = props
  return (<div>
    <InfoTitle styleType={styleType}>餐厅信息</InfoTitle>
    <InfoItem styleType={styleType}>
      <strong>餐厅名称：</strong>{data.nameCn}(#{data.name})
    </InfoItem>
    <InfoItem styleType={styleType}>
      <strong>地址：</strong>{data.position.name}
      <br/>
      (请复制到谷歌地图查找)
    </InfoItem>
    {
      data.tel ?
        <InfoItem styleType={styleType}>
          <strong>电话：</strong>{data.tel}
        </InfoItem>
        : null
    }
    <InfoItem styleType={styleType}>
      <strong>价格范围：</strong>{data.extraInfo.extraInfoGen.price}
    </InfoItem>
    <InfoItem styleType={styleType}>
      <strong>开放时间：</strong>{data.extraInfo.extraInfoGen.time}
    </InfoItem>
    <br/>
  </div>)
}

module.exports = {
  Interesting: (props) => {
    const {data, styleType} = props
    return (
      <Layout>
        <p><img src={processImg(data.mainPic.src, config.imgProcessType.s1)} width='100%' alt=""/></p>
        {
          data.content.map(item => {
            if (item.tag === 'p') {
              return <ItemP>{item.text}</ItemP>
            }
            if (item.tag === 'figure') {
              return <div>
                <img src={processImg(item.src, config.imgProcessType.s1)} width='100%' alt=""/>
                <ItemPCenter>{item.text}</ItemPCenter>
              </div>
            }
            if (item.tag === 'div') {
              // return Array.isArray(item.imgs) ? item.imgs.map(v => <img src={processImg(v.src, config.imgProcessType.s1)} width='100%' alt=""/>) : null
              return <div>
                {
                  item.imgs ? item.imgs.map(v => <div>
                    <img src={processImg(v.src, config.imgProcessType.s1)} width='100%' alt=""/>
                    <ItemPCenter>{v.text}</ItemPCenter>
                  </div>)
                    : null
                }
              </div>
            }
          })
        }
        {/*餐厅信息*/}
        <RestaurantInfo data={data.restaurantData} styleType={styleType} />
      </Layout>
    )
  },
  Restaurant: (props) => {
    const {data, styleType} = props
    let imgs = {imgs13:[], imgs14:[]}
    data.imgs.map(item => {
      let type = item.type
      let re = {
        src:processImg(item.src, config.imgProcessType.s2),
        srcOrigin: item.src,
        text: item.text
      }
      imgs[`imgs${type}`].push(re)
      return re
    })
    // let darenData = data.comments.find(item => item.menu.length > 0)
    return (
      <Layout>
        {/*餐厅图片*/}
        <img src={imgs.imgs13[0].src} width='100%' alt=""/>
        <img src={imgs.imgs14[0].src} width='100%' alt=""/>
        <img src={imgs.imgs14[1].src} width='100%' alt=""/>
        {/*{styleType, userName, userImg, content}*/}
        <Daren styleType={1} {...data.darenData} />
        {/*推荐菜*/}
        {
          data.menuRecommend.map(item => {
            return <div>
              <img src={processImg(item.imgs[0].src, config.imgProcessType.s2)} width='100%' alt=""/>
              <ItemPCenter>{item.nameCn}({item.name})</ItemPCenter>
            </div>
          })
        }
        {/*餐厅信息*/}
        <RestaurantInfo data={data} styleType={styleType} />
      </Layout>
    )
  }
}
